<template>
  <div v-if="notGenPic" class="home">
    <el-row
      class="ffirst"
      style="width: auto; padding-top: 5%"
      v-show="inSearch"
    >
      <el-col :span="12" :offset="6"><h1 class="slogan">心语解惑</h1></el-col>
    </el-row>
    <el-row
      v-show="inSearch"
      class="fthird"
      style="width: auto; margin-top: 15px"
    >
      <el-col :span="16" :offset="4">
        <div class="txt" ref="chatTxt">
          <div
            class="cancelBu"
            style="display: flex; align-items: flex-start; margin-bottom: 8px"
          >
            <el-button circle size="small" color="#353b46" @click="cancel()"
              ><el-icon><Close /></el-icon
            ></el-button>
          </div>
          <div class="chat-wrapper">
            <chat-item
              v-for="item in chatItems"
              :key="item.timeStamp"
              :message="item.message"
              :timeStamp="item.timeStamp"
              :from="item.from"
              :loading="item.loading"
            ></chat-item>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row
      class="first"
      style="width: auto; padding-top: 10%; padding-bottom: 3%"
      v-show="!inSearch"
    >
      <el-col :span="12" :offset="6"><h1 class="slogan">心语解惑</h1></el-col>
    </el-row>
    <el-row class="second" style="width: auto">
      <el-col :span="16" :offset="4">
        <el-input
          @focus="handleInputFocus"
          @blur="handleInputBlur"
          placeholder="请输入文字或点击左侧麦克风按钮进行提问吧~"
          v-model="info"
          clearable
          @keyup.enter="generate()"
        >
          <template #prefix>
            <div id="voice"></div>
            <div class="voice-input-button-wrapper">
              <voice-input-button
                appId="c5d5f287"
                apiKey="7a6d716e393d7eca139540949a397323"
                apiSecret="MTE3MThhMmViY2ZjNDhmZWRlMzkyZDQz"
                color="#ACAFB6"
                tipPosition="top"
                interactiveMode="touch"
                v-model="result"
                :record="showResult"
                :record-start="recordStart"
                :record-stop="recordStop"
                :record-blank="recordNoResult"
                :record-failed="recordFailed"
                :record-ready="recordReady"
                :record-complete="recordComplete"
              >
                <template v-slot:no-speak>没听清您说的什么</template>
              </voice-input-button>
              <!-- <el-icon class="el-input__icon" :size="20"><search /></el-icon> -->
            </div>
          </template>
          <template #append>
            <el-button class="phoneCode" @click="generate()">提问</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row v-show="!inSearch" class="third" style="width: auto">
      <el-col :span="16" :offset="4">
        <div style="margin-top: 3px">
          <div
            class="txt2"
            style="
              color: #c7a46c;
              font-weight: 50;
              letter-spacing: 2px;
              margin-top: 30px;
            "
          >
            您想要的，在这里都能搜到！
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div v-else class="home">
    <el-row class="row-bg">
      <el-col :span="8" :offset="1">
        <el-row
          v-show="inSearch"
          class="fthird"
          style="width: auto; margin-top: 31px; margin-bottom: 5px"
        >
          <el-col :span="24">
            <div class="txt23" ref="chatTxt">
              <div
                class="cancelBu"
                style="
                  display: flex;
                  align-items: flex-start;
                  margin-top: 8px;
                  margin-bottom: 8px;
                "
              >
                <el-button circle size="small" color="#353b46" @click="cancel()"
                  ><el-icon><Close /></el-icon
                ></el-button>
              </div>
              <div class="chat-wrapper">
                <chat-item
                  v-for="item in chatItems"
                  :key="item.timeStamp"
                  :message="item.message"
                  :timeStamp="item.timeStamp"
                  :from="item.from"
                  :loading="item.loading"
                ></chat-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="second" style="width: auto">
          <el-col :span="24">
            <el-input
              @focus="handleInputFocus"
              @blur="handleInputBlur"
              placeholder="请输入文字或点击左侧麦克风按钮进行提问吧~"
              v-model="info"
              clearable
              @keyup.enter="generate2()"
            >
              <template #prefix>
                <div id="voice"></div>
                <div class="voice-input-button-wrapper">
                  <voice-input-button
                    appId="c5d5f287"
                    apiKey="7a6d716e393d7eca139540949a397323"
                    apiSecret="MTE3MThhMmViY2ZjNDhmZWRlMzkyZDQz"
                    color="#ACAFB6"
                    tipPosition="top"
                    interactiveMode="touch"
                    v-model="result"
                    :record="showResult"
                    :record-start="recordStart"
                    :record-stop="recordStop"
                    :record-blank="recordNoResult"
                    :record-failed="recordFailed"
                    :record-ready="recordReady"
                    :record-complete="recordComplete"
                  >
                    <template v-slot:no-speak>没听清您说的什么</template>
                  </voice-input-button>
                  <!-- <el-icon class="el-input__icon" :size="20"><search /></el-icon> -->
                </div>
              </template>
              <template #append>
                <el-button class="phoneCode" @click="generate2()"
                  >提问</el-button
                >
              </template>
            </el-input>
          </el-col>
        </el-row></el-col
      >
      <el-col :span="4" style="margin-right: 1.5px; bottom: 0px">
        <div class="videoPlace" v-show="options.src.length != 0">
          <vue3VideoPlay
            v-bind="options"
            poster="https://fengru-pic.oss-cn-beijing.aliyuncs.com/3D%E8%99%9A%E6%8B%9F%E4%BA%BA%E7%A4%BA%E6%84%8F%E5%9B%BEnew.jpg"
            @pause="handlePause()"
            @canplay="onCanplay()"
          />
        </div>
        <div class="videoPlaceLoading" v-show="options.src.length == 0">
          <newloading></newloading></div
      ></el-col>
      <el-col :span="10">
        <div style="width: 105%; margin-top: 44px">
          <el-carousel
            :interval="5000"
            height="480px"
            trigger="click"
            @change="changePage"
            :autoplay="false"
            @setActiveItem="setActiveItem"
            ref="carousel"
          >
            <el-carousel-item v-for="(item, index) in story" :key="index">
              <!--              <img :src="item.url" @click="viewPic(item)"/>-->
              <!--            该写法使图片自适应容器-->
              <!--            :preview-teleported="true"指的是图片全屏预览-->
              <ElImage
                :src="item.pic"
                fit="fit"
                style="object-fit: scale-down; width: 100%; height: 100%"
                :preview-src-list="srcList"
                :preview-teleported="true"
                @click="handleSrcList(item.pic)"
              >
                <template #error>
                  <div class="image-slot">
                    <loading2></loading2>
                  </div>
                </template>
              </ElImage>
            </el-carousel-item>
          </el-carousel>
          <el-divider
            style="margin-top: 10px; margin-bottom: 10px"
          ></el-divider>

          <div class="txt1">
            <span class="txtLoad" v-if="story[paraIndex].Chinese.length == 0">
              <span style="--i: 1">故</span>
              <span style="--i: 2">事</span>
              <span style="--i: 3">内</span>
              <span style="--i: 4">容</span>
              <span style="--i: 5">加</span>
              <span style="--i: 6">载</span>
              <span style="--i: 7">中</span>
              <span style="--i: 8">.</span>
              <span style="--i: 9">.</span>
              <span style="--i: 10">.</span>
              <span style="--i: 11">.</span></span
            >
            <span v-else
              ><span v-if="showChinese"
                >{{ story[paraIndex].Chinese
                }}<span
                  style="
                    vertical-align: middle;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  title="点击聆听文本内容"
                  @click="playAudio(story[paraIndex].Chinese, paraIndex, 'Ch')"
                  ><svg
                    t="1678104113047"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2526"
                    width="18.5"
                    height="18.5"
                    style="padding-top: 7px"
                  >
                    <path
                      d="M460.8 128c-6.4-6.4-19.2-6.4-32 0L224 281.6h-192c-19.2 0-32 19.2-32 32V704c0 19.2 12.8 32 32 32h192L428.8 896c6.4 0 12.8 6.4 19.2 6.4 6.4 0 12.8 0 12.8-6.4 12.8-6.4 19.2-19.2 19.2-25.6V153.6c0-6.4-6.4-19.2-19.2-25.6z m-44.8 678.4L256 684.8c-6.4-6.4-12.8-6.4-19.2-6.4H64V345.6h172.8c6.4 0 12.8 0 19.2-6.4l160-121.6v588.8zM857.6 512c0-115.2-57.6-224-153.6-268.8-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 70.4 32 115.2 115.2 115.2 211.2 0 96-44.8 172.8-115.2 211.2-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 102.4-44.8 160-153.6 160-268.8z"
                      p-id="2527"
                      fill="#2894FF"
                    ></path>
                    <path
                      d="M601.6 364.8c-12.8-6.4-32 0-44.8 12.8s0 32 12.8 44.8c32 12.8 51.2 51.2 51.2 89.6 0 38.4-19.2 76.8-51.2 89.6-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 57.6-25.6 89.6-83.2 89.6-147.2 0-64-32-121.6-83.2-147.2zM812.8 134.4c-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 108.8 51.2 179.2 179.2 179.2 320s-70.4 268.8-179.2 320c-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 128-64 211.2-211.2 211.2-377.6 6.4-166.4-76.8-313.6-204.8-377.6z"
                      p-id="2528"
                      fill="#2894FF"
                    ></path>
                  </svg> </span
              ></span>
              <span v-else
                >{{ translateMsg[paraIndex].dst
                }}<span
                  style="
                    vertical-align: middle;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  title="点击聆听文本内容"
                  @click="
                    playAudio(translateMsg[paraIndex].dst, paraIndex, 'en')
                  "
                  ><svg
                    t="1678104113047"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2526"
                    width="18.5"
                    height="18.5"
                    style="padding-top: 7px"
                  >
                    <path
                      d="M460.8 128c-6.4-6.4-19.2-6.4-32 0L224 281.6h-192c-19.2 0-32 19.2-32 32V704c0 19.2 12.8 32 32 32h192L428.8 896c6.4 0 12.8 6.4 19.2 6.4 6.4 0 12.8 0 12.8-6.4 12.8-6.4 19.2-19.2 19.2-25.6V153.6c0-6.4-6.4-19.2-19.2-25.6z m-44.8 678.4L256 684.8c-6.4-6.4-12.8-6.4-19.2-6.4H64V345.6h172.8c6.4 0 12.8 0 19.2-6.4l160-121.6v588.8zM857.6 512c0-115.2-57.6-224-153.6-268.8-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 70.4 32 115.2 115.2 115.2 211.2 0 96-44.8 172.8-115.2 211.2-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 102.4-44.8 160-153.6 160-268.8z"
                      p-id="2527"
                      fill="#2894FF"
                    ></path>
                    <path
                      d="M601.6 364.8c-12.8-6.4-32 0-44.8 12.8s0 32 12.8 44.8c32 12.8 51.2 51.2 51.2 89.6 0 38.4-19.2 76.8-51.2 89.6-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 57.6-25.6 89.6-83.2 89.6-147.2 0-64-32-121.6-83.2-147.2zM812.8 134.4c-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 108.8 51.2 179.2 179.2 179.2 320s-70.4 268.8-179.2 320c-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 128-64 211.2-211.2 211.2-377.6 6.4-166.4-76.8-313.6-204.8-377.6z"
                      p-id="2528"
                      fill="#2894FF"
                    ></path>
                  </svg> </span
              ></span>
              <audio
                ref="audio"
                class="aud"
                :src="audioSrc"
                @ended="end()"
              ></audio
            ></span>
            <span
              v-if="story[paraIndex].Chinese.length != 0"
              style="vertical-align: middle; cursor: pointer; margin-left: 10px"
              title="点击切换语言"
              @click="(showChinese = !showChinese), translateAudio()"
              ><svg
                t="1678695424908"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2840"
                width="18.5"
                height="18.5"
                style="padding-top: 7px"
              >
                <path
                  d="M846.04 866.77c-17.08 2.03-32.57-10.18-34.59-27.26-0.22-1.9-0.27-3.81-0.15-5.71v-123c0-33.73-22.17-33.73-30.53-33.73-21.28-0.46-38.91 16.43-39.36 37.72-0.01 0.46-0.01 0.92 0 1.37v117.66c-0.76 18.9-16.71 33.61-35.61 32.84-17.83-0.72-32.12-15.01-32.84-32.84V647.68c-1.23-17.23 11.74-32.19 28.97-33.41 1.69-0.12 3.39-0.1 5.08 0.05a31.953 31.953 0 0 1 31.33 17.76 89.435 89.435 0 0 1 54.99-17.76c54.11 0 86.45 33.59 86.45 90.03V833.8a32.25 32.25 0 0 1-8.88 23.72 34.026 34.026 0 0 1-24.82 9.33l-0.04-0.08z m-233.12-7.46h-134.7c-42.77 0-61.85-18.96-61.85-61.57V608.07c0-42.52 19.09-61.57 61.85-61.57h128.74c17.92 0 32.45 14.53 32.45 32.45s-14.53 32.45-32.45 32.45H490.73c-1.22-0.08-2.45 0.09-3.6 0.5 0.13 0-0.15 0.8-0.15 2.89v52.58h106c16.33-1.66 30.91 10.24 32.57 26.57 0.17 1.68 0.2 3.37 0.08 5.06 0.98 16.66-11.73 30.97-28.4 31.95-1.41 0.08-2.83 0.07-4.24-0.05H486.9V791c-0.04 1.06 0.08 2.13 0.35 3.15 1.12 0.15 2.25 0.23 3.38 0.24h122.31c16.96-1.07 31.58 11.81 32.65 28.76 0.07 1.16 0.08 2.33 0.02 3.5 1.35 16.68-11.07 31.3-27.75 32.65-1.64 0.13-3.28 0.13-4.92 0h-0.02zM327.54 482.85c-17.36 2.36-33.34-9.8-35.7-27.16-0.3-2.21-0.37-4.44-0.2-6.67V370.5h-85.27c-45.86 0-66.31-20.52-66.31-66.31v-93.87c0-45.58 20.52-65.9 66.31-65.9h85.27v-31.53c-1.38-17.11 11.37-32.11 28.48-33.49 1.92-0.15 3.84-0.13 5.76 0.07 30.26 0 36.63 18.17 36.63 33.42v31.59h86.09c45.86 0 66.33 20.34 66.33 65.88v93.89c0 45.86-20.52 66.29-66.33 66.29h-86.05v78.52c1.25 17.47-11.9 32.65-29.37 33.91-1.88 0.13-3.76 0.1-5.63-0.1v-0.02zM217.21 211.27c-6.47 0-7.07 0.6-7.07 7.07v78.2c0 6.53 0.6 7.15 7.07 7.15h74.43v-92.42h-74.43z m145.35 92.38h75.29c6.29 0 7.09-0.8 7.09-7.07v-78.25c0-6.29-0.8-7.09-7.09-7.09h-75.31v92.42h0.02z m151.42 655.91C266.43 958.82 66.36 757.55 67.1 510c0.1-35 4.31-69.86 12.52-103.88 4.81-19 23.92-30.68 43.03-26.29 19.1 4.61 30.86 23.81 26.29 42.91-48.93 202.33 75.42 406.01 277.75 454.94a376.924 376.924 0 0 0 87.29 10.56c19.69 0.02 35.64 15.99 35.63 35.69-0.02 19.67-15.96 35.61-35.63 35.63z m398.49-310.05c-19.69 0-35.66-15.96-35.66-35.65 0-2.95 0.37-5.9 1.09-8.76 51.31-201.82-70.7-407.02-272.52-458.33-29.89-7.6-60.59-11.5-91.43-11.62-19.68 0-35.64-15.95-35.64-35.63 0-19.68 15.95-35.64 35.63-35.64h0.01c247.57 0.76 447.65 202.08 446.89 449.65-0.11 36.8-4.76 73.44-13.83 109.1-4 15.8-18.23 26.88-34.54 26.88z"
                  fill="#2894FF"
                  p-id="2841"
                ></path>
              </svg>
            </span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script name="ChatView">
import {
  getCurrentInstance,
  defineComponent,
  ref,
  toRefs,
  reactive,
  onMounted,
} from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import voiceInputButton from "voice-input-button2";
import { Vue2InVue3 } from "@efox/emp-vuett";
import ChatItem from "../components/ChatItem.vue";
import loading2 from "@/components/loading2.vue";
import PlanetLoading from "@/components/PlanetLoading.vue";
import newloading from "@/components/newloading.vue";
import md5 from "js-md5";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Close,
} from "@element-plus/icons-vue";
const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");

export default {
  name: "App",

  components: {
    "voice-input-button": ContentInVue3,
    "chat-item": ChatItem,
    Close,
    loading2,
    PlanetLoading,
    newloading,
  },
  watch: {
    story: {
      handler(oldVal, newVal) {
        if (newVal.length != 0) {
          this.translateMsg = [];
          if (newVal[0].Chinese == "") {
            console.log("还没有产生文本");
          } else {
            this.translate(newVal);
            console.log(this.translateMsg);
          }
        } else {
          console.log("还没有产生文本");
        }
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    if (this.story.length != 0) {
      this.translateMsg = [];
      this.translate(this.story);
      console.log(this.translateMsg);
    } else {
      console.log("还没有产生文本");
    }
  },
  data() {
    return {
      info: "",
      loading: false,
      notGenPic: false,
      ans: "",
      inSearch: false,
      api: "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",
      result: "",
      chatItems: [],
      srcList: [],
      showChinese: true,
      story: [
        {
          Chinese: "",
          English: "",
          pic: "",
        },
        {
          Chinese: "",
          English: "",
          pic: "",
        },
        {
          Chinese: "",
          English: "",
          pic: "",
        },
        {
          Chinese: "",
          English: "",
          pic: "",
        },
      ],
      fullstory: [
        {
          Chinese:
            "从前，有一个小女孩，她很喜欢动物。有一天，她在森林里散步时，遇到了一只独角兽。小女孩非常开心，因为她从来没有见过独角兽。独角兽对她微笑，小女孩感觉非常温暖。",
          English:
            "Once upon a time, there was a little girl who liked animals very much. One day, while walking in the forest, she met a unicorn. The little girl was very happy because she had never seen a unicorn. The unicorn smiled at her, and the little girl felt very warm.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230328193810.jpg",
        },
        {
          Chinese:
            "小女孩和独角兽一起玩耍，他们一起跳跃和奔跑。独角兽还为小女孩制作了一个美丽的花环，她带上后非常开心。他们一起吃了美味的蓝莓，小女孩还分享了她的三明治。",
          English:
            "The little girl and the unicorn play together, they jump and run together. The unicorn also made a beautiful wreath for the little girl, and she was very happy with it. They ate delicious blueberries together, and the little girl shared her sandwich.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230328194512.jpg",
        },
        {
          Chinese:
            "当太阳开始下山时，小女孩觉得有点累了。独角兽用它的角制作了一张舒适的床铺，让小女孩可以休息。小女孩非常感激，她感觉自己非常幸福。",
          English:
            "When the sun began to set, the little girl felt a bit tired. The unicorn used its horns to make a comfortable bed for the little girl to rest. The little girl was very grateful and felt very happy.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/ee7ee8958c6838231f287f8be6bb5d7.jpg",
        },
        {
          Chinese:
            "第二天，小女孩醒来发现独角兽不见了。她感到失望，但她知道独角兽可能已经回到了它的家。小女孩回家后，她非常兴奋地和她的家人分享了她和独角兽在森林里度过的美好时光。",
          English:
            "The next day, the little girl woke up and found the unicorn missing. She was disappointed, but she knew that the unicorn might have returned to its home. After the little girl returned home, she was very excited to share with her family the wonderful time she had spent with the unicorn in the forest.",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/4113027cfe41701a7642efd002343e6.png",
        },
        // {
        //   Chinese: "",
        //   English: "",
        //   pic: "",
        // },
        // {
        //   Chinese: "",
        //   English: "",
        //   pic: "",
        // },
        // {
        //   Chinese: "",
        //   English: "",
        //   pic: "",
        // },
        // {
        //   Chinese: "",
        //   English: "",
        //   pic: "",
        // },
      ],
      translateMsg: [],
      translateText: "",
      translateStyle: "",
      videoIndex: 0,
      canGenPic: false,
      options: {
        width: "236.25px", //播放器高度
        height: "420px", //播放器高度
        // webFullScreen: true, //开启网页全屏
        color: "#409eff", //主题色
        speed: true, //关闭进度条拖动^j5kF@!$
        title: "", //视频名称
        // src: "https://videorender.oss-cn-shanghai.aliyuncs.com/platform%2Fvideo%2F3d_paas%2F20534%2F71c333ec-d529-4feb-bac7-aeb712299b1f%2Fvideo.mp4?Expires=1679055672&OSSAccessKeyId=LTAI5tLFxiQvptGPnfyMfWnX&Signature=FQsqCvOvk%2FXDBw9LKs1HorSh7GA%3D", //视频源,
        // src: "https://fengrucup.oss-cn-beijing.aliyuncs.com/video%20%2810%29.mp4",
        src: "",
        // src: "https://virtual-human-video.oss-cn-beijing.aliyuncs.com/3d_paas%2F20534%2F8d8f05ed-0477-41e9-88d0-8d227af5d5c1%2Fvideo.mp4?Expires=1679925245&OSSAccessKeyId=LTAI5tLFxiQvptGPnfyMfWnX&Signature=xtOp2Hqoy96rZC%2FTv9kpgR9%2FGXI%3D",
        control: false, //是否显示控制栏
        autoPlay: false, //是否自动播放
      },
      txtArr: [{ role: "system", content: "You are a helpful assistant." }],
      paraIndex: 0,
      isplay: false,
      audioSrc: "",
      imgUrl: "",
    };
  },

  methods: {
    scrollToBottom: function () {
      this.$nextTick(() => {
        var container = this.$el.querySelector(".txt");
        container.scrollTop = container.scrollHeight;
      });
    },
    scrollToBottom2: function () {
      this.$nextTick(() => {
        var container = this.$el.querySelector(".txt23");
        container.scrollTop = container.scrollHeight;
      });
    },
    generate() {
      //   const { proxy } = getCurrentInstance();
      //   console.log(proxy);
      var txt;

      console.log("generate");
      if (this.info == "") {
        ElMessage({
          message: "请输入您的问题",
          type: "warning",
          offset: 80,
        });
        return;
      }
      //   var first = document.querySelector(".first");
      //   first.style.transform = "translate(0, 30px)";
      //   first.style.transition = "all  2.25s  ease-in";
      var second = document.querySelector(".second");
      second.style.transform = "translate(0, 30px)";
      second.style.transition = "all  1.25s  ease-in";
      var third = document.querySelector(".fthird");
      third.style.transform = "translate(0, -5px)";
      third.style.transition = "all  1.25s  ease-in";
      // js实现滚动条实时到最底部
      // this.chatItems.forEach((item) => {
      //   if (item.from == 1) {
      //     txtArr.push({ role: "user", content: item.message });
      //   }
      //   if (item.from == 2) {
      //     txtArr.push({ role: "assistant", content: item.message });
      //   }
      // });
      this.chatItems.push({
        message: this.info,
        from: 1,
        timeStamp: new Date().toLocaleString(),
        loading: false,
      });
      if (
        this.info.startsWith("请为我讲一个故事") ||
        this.info.startsWith("请给我讲一个故事")
      ) {
        this.loading = true;
        this.inSearch = true;
        this.chatItems.push({
          message: "",
          from: 2,
          timeStamp: new Date().toLocaleString(),
          loading: true,
        });
        this.scrollToBottom();
        // 延时1s执行
        setTimeout(() => {
          this.chatItems[this.chatItems.length - 1].loading = false;
          this.chatItems[this.chatItems.length - 1].message =
            "好的，即将为你带来故事全文和故事插图！";
        }, 2000);
        setTimeout(() => {
          this.notGenPic = false;
        }, 3000);
        this.info = "";
        setTimeout(() => {
          this.options.src =
            "https://fengrucup.oss-cn-beijing.aliyuncs.com/video%20%2810%29.mp4";
          this.story = [...this.fullstory];
        }, 20000);
      } else {
        this.txtArr.push({ role: "user", content: this.info });
        txt = this.info;
        this.info = "";
        this.ans = "";
        this.loading = true;
        this.inSearch = true;
        this.chatItems.push({
          message: "",
          from: 2,
          timeStamp: new Date().toLocaleString(),
          loading: true,
        });
        this.scrollToBottom();
        this.$axios({
          url: "https://api.openai.com/v1/chat/completions",
          method: "post",
          data: {
            // max_tokens: 4000,
            model: "gpt-3.5-turbo",
            messages: this.txtArr,
            temperature: 0.7,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
          },
          headers: {
            "content-type": "application/json",
            Authorization: "Bearer " + this.api,
          },
        })
          .then((res) => {
            console.log(res);
            let tmpans = res.data.choices[0].message.content;
            if (
              tmpans[0] == "?" ||
              tmpans[0] == "？" ||
              tmpans[0] == "。" ||
              tmpans[0] == "！" ||
              tmpans[0] == "，"
            ) {
              tmpans = tmpans.substring(1, tmpans.length);
            }
            // 去除文本前后空格换行
            tmpans = tmpans.trim();
            //   console.log(tmpans);
            this.ans = tmpans;
            console.log(this.ans);
            this.chatItems[this.chatItems.length - 1].loading = false;
            this.chatItems[this.chatItems.length - 1].message = this.ans;
            this.txtArr.push({ role: "assistant", content: this.ans });
            this.loading = false;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    generate2() {
      //   const { proxy } = getCurrentInstance();
      //   console.log(proxy);
      var txt;

      console.log("generate2");
      if (this.info == "") {
        ElMessage({
          message: "请输入您的问题",
          type: "warning",
          offset: 80,
        });
        return;
      }
      //   var first = document.querySelector(".first");
      //   first.style.transform = "translate(0, 30px)";
      //   first.style.transition = "all  2.25s  ease-in";
      var second = document.querySelector(".second");
      second.style.transform = "translate(0, 5px)";
      second.style.transition = "all  1.25s  ease-in";
      var third = document.querySelector(".fthird");
      third.style.transform = "translate(0, -5px)";
      third.style.transition = "all  1.25s  ease-in";
      // js实现滚动条实时到最底部
      // this.chatItems.forEach((item) => {
      //   if (item.from == 1) {
      //     txtArr.push({ role: "user", content: item.message });
      //   }
      //   if (item.from == 2) {
      //     txtArr.push({ role: "assistant", content: item.message });
      //   }
      // });
      this.chatItems.push({
        message: this.info,
        from: 1,
        timeStamp: new Date().toLocaleString(),
        loading: false,
      });
      this.txtArr.push({ role: "user", content: this.info });
      if (
        this.info.startsWith("请为我讲一个故事") ||
        this.info.startsWith("请给我讲一个故事")
      ) {
        this.loading = true;
        this.inSearch = true;
        this.chatItems.push({
          message: "",
          from: 2,
          timeStamp: new Date().toLocaleString(),
          loading: true,
        });
        this.scrollToBottom2();
        // 延时1s执行
        setTimeout(() => {
          this.chatItems[this.chatItems.length - 1].loading = false;
          this.chatItems[this.chatItems.length - 1].message =
            "好的，即将为你带来故事全文和故事插图！";
        }, 2000);
        setTimeout(() => {
          this.notGenPic = false;
        }, 3000);
        this.info = "";
        setTimeout(() => {
          this.options.src =
            "https://fengrucup.oss-cn-beijing.aliyuncs.com/video%20%2810%29.mp4";
          this.story = [...this.fullstory];
        }, 20000);
      } else {
        txt = this.info;
        this.info = "";
        this.ans = "";
        this.loading = true;
        this.inSearch = true;
        this.chatItems.push({
          message: "",
          from: 2,
          timeStamp: new Date().toLocaleString(),
          loading: true,
        });
        this.scrollToBottom2();

        this.$axios({
          url: "https://api.openai.com/v1/chat/completions",
          method: "post",
          data: {
            // max_tokens: 4000,
            model: "gpt-3.5-turbo",
            messages: this.txtArr,
            temperature: 0.7,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
          },
          headers: {
            "content-type": "application/json",
            Authorization: "Bearer " + this.api,
          },
        })
          .then((res) => {
            console.log(res);
            let tmpans = res.data.choices[0].message.content;
            if (
              tmpans[0] == "?" ||
              tmpans[0] == "？" ||
              tmpans[0] == "。" ||
              tmpans[0] == "！" ||
              tmpans[0] == "，"
            ) {
              tmpans = tmpans.substring(1, tmpans.length);
            }
            // 去除文本前后空格换行
            tmpans = tmpans.trim();
            //   console.log(tmpans);
            this.ans = tmpans;
            console.log(this.ans);
            this.chatItems[this.chatItems.length - 1].loading = false;
            this.chatItems[this.chatItems.length - 1].message = this.ans;
            this.txtArr.push({ role: "assistant", content: this.ans });
            this.loading = false;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    cancel() {
      this.inSearch = false;
      this.notGenPic = true;
      this.info = "";
      this.ans = "";
      // var first = document.querySelector(".first");
      // first.style.transform = "";
      // first.style.transition = "all  1.25s  ease-in";
      var second = document.querySelector(".second");
      second.style.transform = "";
      second.style.transition = "all  1.25s  ease-in";
      // var third = document.querySelector(".third");
      // third.style.transform = "";
      // third.style.transition = "all  1.25s  ease-in";
      this.chatItems = [];
      this.txtArr = [
        { role: "system", content: "You are a helpful assistant." },
      ];
    },
    recordReady: function () {
      console.info("按钮就绪!");
    },
    recordStart: function () {
      console.info("录音开始");
    },
    showResult: function (text) {
      console.info("收到识别结果：", text);
    },
    recordStop: function () {
      console.info("录音结束");
    },
    recordNoResult: function () {
      console.info("没有录到什么，请重试");
    },
    recordComplete: function (text) {
      console.info("识别完成! 最终结果：", text);
      this.info = text;
    },

    recordFailed: function (error) {
      console.info("识别失败，错误栈：", error);
    },
    handleInputFocus() {
      let appendEle = document.getElementsByClassName(
        "el-input-group__append"
      )[0];
      var apele = appendEle;
      apele.style.borderColor = "#4568ee";
    },
    handleInputBlur() {
      let appendEle = document.getElementsByClassName(
        "el-input-group__append"
      )[0];
      var apele = appendEle;
      apele.style.borderColor = "#DCDFE6";
    },
    translate(msg) {
      var appid = "20230313001598518";
      var key = "RDFuoDA9KWreYtnZVOej";
      var salt = new Date().getTime();
      var query = "";
      // var query = msg;
      // 多个query可以用\n连接  如
      for (let i = 0; i < msg.length; i++) {
        query += msg[i].Chinese;
        if (i != msg.length - 1) {
          query += "\n";
        }
      }
      console.log(encodeURIComponent(query));
      var from = "zh";
      var to = "en";
      var str1 = appid + query + salt + key;
      var sign = md5(str1);
      var url =
        "http://api.fanyi.baidu.com/api/trans/vip/translate" +
        "?q=" +
        encodeURIComponent(query) +
        "&from=" +
        from +
        "&to=" +
        to +
        "&appid=" +
        appid +
        "&salt=" +
        salt +
        "&sign=" +
        sign;
      this.fetchJsonp(url)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          for (let i = 0; i < data.trans_result.length; i++) {
            this.translateMsg.push(data.trans_result[i]);
          }
        });
    },
    translateToText(msg) {
      var appid = "20230313001598518";
      var key = "RDFuoDA9KWreYtnZVOej";
      var salt = new Date().getTime();
      // var query = "";
      var query = msg;
      // 多个query可以用\n连接  如
      console.log(encodeURIComponent(query));
      var from = "zh";
      var to = "en";
      var str1 = appid + query + salt + key;
      var sign = md5(str1);
      var url =
        "http://api.fanyi.baidu.com/api/trans/vip/translate" +
        "?q=" +
        query +
        "&from=" +
        from +
        "&to=" +
        to +
        "&appid=" +
        appid +
        "&salt=" +
        salt +
        "&sign=" +
        sign;
      this.fetchJsonp(url)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          this.translateText = data.trans_result[0].dst;
        });
    },
    translateToStyle(msg) {
      var appid = "20230313001598518";
      var key = "RDFuoDA9KWreYtnZVOej";
      var salt = new Date().getTime();
      // var query = "";
      var query = msg;
      // 多个query可以用\n连接  如
      console.log(encodeURIComponent(query));
      var from = "zh";
      var to = "en";
      var str1 = appid + query + salt + key;
      var sign = md5(str1);
      var url =
        "http://api.fanyi.baidu.com/api/trans/vip/translate" +
        "?q=" +
        query +
        "&from=" +
        from +
        "&to=" +
        to +
        "&appid=" +
        appid +
        "&salt=" +
        salt +
        "&sign=" +
        sign;
      this.fetchJsonp(url)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          this.translateStyle = data.trans_result[0].dst;
        });
    },
    handleSrcList(url) {
      this.srcList = [];
      this.srcList.push(url);
    },
    playAudio(msg, index, type) {
      console.log("begin");
      this.videoIndex = index;
      if (this.isplay) {
        this.$refs.audio.pause();
        this.isplay = false;
        return;
      } else {
        if (this.audioSrc != "") {
          this.$refs.audio.play();
          this.isplay = true;
          return;
        } else {
          this.$axios({
            url: " http://127.0.0.1:8000/api/speech",
            method: "get",
            params: { speech: msg, lang: type },
          }).then((res) => {
            console.log(res.data);
            this.audioSrc = res.data.src;
            console.log(this.audioSrc);
            setTimeout(() => {
              console.log(this.audioSrc);
              this.$refs.audio.play();
            }, 2000);
          });
          this.isplay = true;
        }
      }
    },
    setActiveItem(i) {
      console.log(this.$refs);
      if (this.$refs.carousel) {
        // 手动切换幻灯片 setActiveItem(i)(Carousel Methods)
        // 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
        // i 与 name 里面的值绑定 ，i 决定显示那个 name值的 el-carousel-item
        this.$refs.carousel.setActiveItem(i);
        console.log(i);
      }
    },

    end() {
      this.isplay = false;
    },
    translateAudio() {
      if (this.isplay) {
        this.$refs.audio.pause();
        this.audioSrc = "";
        this.isplay = false;
      } else {
        this.audioSrc = "";
        this.isplay = false;
      }
    },
    handlePause() {
      // alert("pause");
      var playerbutton = document.getElementsByClassName("d-play-btn");
      this.$nextTick(() => {
        playerbutton[0].style.display = "none";
      });
    },
    onCanplay() {
      console.log("canplay");
      // alert("canplay");
      var player = document.getElementsByClassName("d-player-video-main");
      var playerbutton = document.getElementsByClassName("d-play-btn");
      this.$nextTick(() => {
        console.log("player", player, "ss", player[0]);
        player[0].pause();
        playerbutton[0].style.display = "none";
      });
    },

    changePage(item1, item2) {
      console.log("changePage", item1, item2);
      this.paraIndex = item1;
      if (this.audioSrc) {
        this.$refs.audio.pause();
      }
      this.isplay = false;
      this.audioSrc = "";
      console.log(this.paraIndex);
    },
  },
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: "Zhu";
  src: url("../assets/fonts/MaokenZhuyuanTi.ttf");
}
/deep/ .el-input {
  color: #a6adba;
  --el-input-border-color: #2a303c;
  --el-input-bg-color: #2a303c;
  height: 50px;
  --el-input-focus-border-color: #404955;
}

/deep/ .el-input__inner {
  color: #a0a5b0;
  font-weight: 50;
  font-size: 1rem;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

/deep/.el-input-group__append {
  background-color: #191d24;
  box-shadow: none;
  font-weight: 50;
  font-size: 1rem;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}
.logo {
  width: 25vh;
  height: 15vh;
  margin: 0 auto;
  z-index: 1;
}
@keyframes scale-up {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.home {
  background: linear-gradient(rgba(14, 14, 14, 0.7), rgba(0, 0, 0, 0.7)),
    url(../assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}
/deep/.el-skeleton.is-animated .el-skeleton__item {
  background: linear-gradient(90deg, #5e6570 25%, #a6adba 37%, #a6adba 63%);
  background-size: 400% 100%;
  animation: el-skeleton-loading 1.4s ease infinite;
}
.txt {
  //   background-color: #363b46;
  background-color: rgba(0, 0, 0, 0.4);
  //   border-radius: 25px;
  box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 70%);
  height: auto;
  max-height: 50vh;
  border-radius: 10px;
  padding: 1% 5%;
  overflow: auto;
  line-height: 4vh;
  text-align: justify;
  white-space: pre-wrap;
  animation-name: scale-up;
  color: #a6adba;
  font-weight: 400;
  font-size: 1.1rem;
  margin-top: 5%;
}
.slogan {
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  font-weight: 100;
  letter-spacing: 10px;
  font-size: 4.5rem;
  line-height: 1;
  color: #c7a46c;
}
.txt23 {
  //   background-color: #363b46;
  background-color: rgba(0, 0, 0, 0.4);
  //   border-radius: 25px;
  box-shadow: 0 0 10px 0 rgba(128, 128, 128, 0.75);
  // box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 70%);
  height: 70vh;
  max-height: 70vh;
  border-radius: 10px;
  padding: 1% 5%;
  overflow: auto;
  line-height: 4vh;
  text-align: justify;
  white-space: pre-wrap;
  animation-name: scale-up;
  color: #a6adba;
  font-weight: 400;
  font-size: 1.1rem;
  margin-top: 5%;
}

//   .txt:hover {
//     overflow-y: auto;
//   }
.txt23 {
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 3px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-track {
    // background-color: rgb(42, 44, 48 / 46%);
    background: transparent;
    border-radius: 10px;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: #81878f;
    cursor: pointer;
    border-radius: 10px;
  }
}
//   .txt:hover {
//     overflow-y: auto;
//   }
.txt {
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 3px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-track {
    // background-color: rgb(42, 44, 48 / 46%);
    background: transparent;
    border-radius: 10px;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: #81878f;
    cursor: pointer;
    border-radius: 10px;
  }
}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
// 滚动条整体部分
::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  background-color: rgb(42, 44, 48 / 46%);
  border-radius: 10px;
}
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-thumb {
  background: #81878f;
  cursor: pointer;
  border-radius: 10px;
}
.videoPlace {
  width: 100%;
  margin-top: 235px;
  // height: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
}

.videoPlaceLoading {
  width: 100%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin-top: 12%;
}

.right {
  background-color: #c7a46c;
  min-height: 36px;
  margin-left: 25px;
  width: 102%;
}
.center {
  background-color: #c7a46c;
  min-height: 36px;
}
.txtLoad {
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  letter-spacing: 1px;
}

.txtLoad span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 1.15em;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0% {
    transform: translateY(0px);
    color: #475669;
  }

  20% {
    transform: translateY(-15px);
    color: #a6adba;
  }

  40%,
  100% {
    transform: translateY(0px);
    color: #fff;
  }
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
.txt1 {
  background-color: #363b46;
  height: auto;
  max-height: 190px;
  border-radius: 10px;
  padding: 1.5% 3.5% 0.8% 3.5%;
  overflow: auto;
  line-height: 4vh;
  text-align: justify;
  white-space: pre-wrap;
  animation-name: scale-up;
  color: #a6adba;
  font-weight: 400;
  font-size: 1.2rem;
}
</style>
